import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/line/lit-line.ts"
import {LineProps} from "../../../echarts/line/lit-line.ts";

const meta: Meta<LineProps> = {
    title: 'Echarts/LitLine',
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: 'tooltip，渐变色，以及其他各类事件暂时无法在storybook中使用，具体请参考echarts的文档',
            },
        }
    },
    render: (args: LineProps): TemplateResult => {
        return html`<lit-line 
            .chartId=${args.chartId}
            .width=${args.width}
            .height=${args.height}
            .title=${args.title}
            .tooltip=${args.tooltip}
            .legend=${args.legend}
            .grid=${args.grid}
            .toolbox=${args.toolbox}
            .smooth=${args.smooth}
            .boundaryGap=${args.boundaryGap}
            .areaStyle=${args.areaStyle}
            .stack=${args.stack}
            .emphasis=${args.emphasis}
            .label=${args.label}
            .xAxisData=${args.xAxisData}
            .seriesData=${args.seriesData}
        />`;
    },
    argTypes: {
        chartId: { control: 'text' },
        width: { control: 'text' },
        height: { control: 'text' },
        title: { control: 'object' },
        tooltip: { control: 'object' },
        legend: { control: 'object' },
        grid: { control: 'object' },
        toolbox: { control: 'object' },
        smooth: { control: 'boolean' },
        boundaryGap: { control: 'boolean' },
        areaStyle: { control: 'object' },
        stack: { control: 'text' },
        xAxisData: { control: 'object' },
        seriesData: { control: 'object' },
    },
};

export default meta;
type Story = StoryObj<LineProps>;

export const BasicLine: Story = {
    args: {
        chartId: 'basic-line-chart',
        width: '1200px',
        height: '600px',
        xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        seriesData: [[150, 230, 224, 218, 135, 147, 260]],
        smooth: false,
    }
};

export const SmoothLine: Story = {
    args: {
        chartId: 'smooth-line-chart',
        width: '1200px',
        height: '600px',
        xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        seriesData: [[150, 230, 224, 218, 135, 147, 260]],
        smooth: true,
    }
};

export const BasicArea: Story = {
    args: {
        chartId: 'basic-area-chart',
        width: "1200px",
        height: "600px",
        xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        seriesData: [[150, 230, 224, 218, 135, 147, 260]],
        smooth: false,
        areaStyle: { color: 'rgba(255, 0, 0, 0.5)' },
        boundaryGap: false
    }
}

export const StackedLine: Story = {
    args: {
        chartId: 'stacked-line-chart',
        width: "1200px",
        height: "600px",
        title: {
            text: 'Stacked Line Chart',
            subtext: 'Demo of stacked line chart',
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        seriesData: [
            [150, 230, 224, 218, 135, 147, 260],
            [120, 182, 191, 234, 290, 330, 310],
            [220, 332, 301, 334, 390, 330, 320],
            [150, 232, 201, 154, 190, 330, 410],
            [320, 332, 301, 334, 390, 330, 320]
        ],
        smooth: false,
        boundaryGap: false,
        stack: "Total"
    }
}

export const StackedArea: Story = {
    args: {
        chartId: 'stacked-area-chart',
        width: "1200px",
        height: "600px",
        title: {
            text: 'Stacked Area Chart'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        seriesData: [
            [150, 230, 224, 218, 135, 147, 260],
            [120, 182, 191, 234, 290, 330, 310],
            [220, 332, 301, 334, 390, 330, 320],
            [150, 232, 201, 154, 190, 330, 410],
            [320, 332, 301, 334, 390, 330, 320]
        ],
        smooth: false,
        boundaryGap: false,
        stack: "Total",
        areaStyle: {},
        emphasis: {focus: 'series'},
        label: [{}, {}, {}, {}, {
            show: true,
            position: 'top'
        }]
    }
}

export const GradientStackedArea: Story = {
    args: {
        chartId: 'gradient-stacked-area-chart',
        width: "1200px",
        height: "600px",
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        title: {
            text: 'Gradient Stacked Area Chart'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        seriesData: [
            [150, 230, 224, 218, 135, 147, 260],
            [120, 182, 191, 234, 290, 330, 310],
            [220, 332, 301, 334, 390, 330, 320],
            [150, 232, 201, 154, 190, 330, 410],
            [320, 332, 301, 334, 390, 330, 320]
        ],
        smooth: true,
        stack: "Total",
        lineStyle: {
            width: 0
        },
        showSymbol: false,
        emphasis: {
            focus: 'series'
        },
        label: [{}, {}, {}, {}, {
            show: true,
            position: 'top'
        }],
        areaStyle: [{}, {}, {}, {}, {}],
    }
}
